<template>
  <view class="container">
    <view class="container__body">
      <!--   列表   -->
      <view class="container__body__list">
        <view class="container__body__list__item" v-for="(item, index) in list" :key="index">
          <view class="container__body__list__item__content" @click.stop="handleToDetail(item)">
            <view class="container__body__list__item__content__left">
              <view class="container__body__list__item__content__left__section" v-if="showSelect">
                <u-checkbox-group @change="handleChecked(item)">
                  <u-checkbox :checked="checkedIds.includes(item.userHistoryId)" shape="circle"
                              activeColor="#FF9900"></u-checkbox>
                </u-checkbox-group>
              </view>
              <view class="container__body__list__item__content__left__image">
                <image :src="item.apartmentPictureList[0]" mode="aspectFill" v-if="item.houseStatus==='0'"></image>
                <text v-else>房源已失效</text>
              </view>
            </view>
            <view class="container__body__list__item__content__right">
              <view class="container__body__list__item__content__right__houseInfo">
                <view class="title">
                  {{ item.title }}
                </view>
                <view class="tags">
                  <view :class="index==0?'h-tag-active':'h-tag'"
                        v-for="(i,index) in item.labelNames.split(',').slice(0,4)" :key="index">{{ i }}
                  </view>
                </view>
                <view class="area">
                  <dict-tag :options="dict.type.allocation_type" :value="item.allocationType"/>
                  {{ item.houseArea }}㎡
                </view>
                <view class="houseType">
                  {{ item.roomType }}室{{ item.bedNumber }}床.可住{{ item.checkInNumber }}人
                </view>
                <view class="coupon">
                  <view class="coupon-item" v-for="(i,index) in item.couponList.slice(0,3)" :key="index">
                    {{ i.couponLabel }}
                  </view>
                </view>
              </view>
              <view class="container__body__list__item__content__right__price">
                <view class="flex justify-between">
                  <view v-if="item.leaseIntervalType === '1'">
                    ￥
                    <text class="num">{{ item.todayPrice }}</text>
                    /晚
                  </view>
                  <view v-if="item.leaseIntervalType !== '1'&&item.monthRent">
                    ￥
                    <text class="num">{{ item.monthRent }}</text>
                    /月
                  </view>
                </view>

              </view>
            </view>
          </view>
        </view>
        <uni-load-more :status="loadStatus" :contentText="contentText"></uni-load-more>
      </view>
    </view>
    <!--   底部操作栏   -->
    <view class="container__footer">
      <template v-if="showSelect">
        <view class="container__footer__section">
          <u-checkbox-group>
            <u-checkbox label="全选" :checked="selectAll" shape="circle" @change="handleSelectAll"
                        activeColor="#FF9900" :disabled="!list||!list.length"></u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="container__footer__button">
          <button @click.stop="handleShowSelect">取消</button>
        </view>
        <view class="container__footer__button active">
          <button @click="handleDelete">删除</button>
        </view>
      </template>
      <view class="container__footer__button" v-else>
        <button @click.stop="handleShowSelect">编辑</button>
      </view>
    </view>
    <!--   通用弹窗   -->
    <hxk-dialog ref="commonDialog"/>
  </view>
</template>
<script>
import {debounce} from "@/utils/common";
import {deleteHistory, getCollection} from "@/api/mine/history";

export default {
  name: "index",
  dicts: ['allocation_type'],
  data() {
    return {
      searchType: 'premisesAddress',
      // 搜索标签
      searchTabs: [
        {
          label: "未使用(0)",
          value: "1"
        },
        {
          label: "已使用(0)",
          value: "2"
        },
        {
          label: "已过期(0)",
          value: "3"
        }
      ],
      // 列表数据
      list: [],
      // 总数
      total: 0,
      // 分页参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        couponRecordState: null,//优惠券使用状态
        keyword: null//搜索关键字
      },
      // 加载状态
      loadStatus: 'more',//more:加载更多,noMore:没有更多数据,loading:加载中
      // 加载提示语
      contentText: {contentdown: '下拉加载更多', contentrefresh: "加载中...", contentnomore: "没有更多数据了"},
      // 弹窗数据
      dialogData: {},
      // 核销弹窗数据
      verificationForm: {
        verificationCode: ''
      },
      // 核销弹窗规则
      verificationRules: {
        verificationCode: [
          {required: true, message: '请输入核销码', trigger: 'blur'}
        ]
      },
      // 已选择Id
      checkedIds: [],
      // // 全选
      // selectAll: false,
      // 是否显示选择框
      showSelect: false,
    }
  },
  computed: {
    selectAll: {
      get() {
        if (this.list && this.list.length > 0) {
          return this.list.every(item => this.checkedIds.includes(item.userHistoryId))
        }
        return false
      },
      set(val) {
      }
    }
  },
  onLoad() {
    // 页面显示,重新获取数据
    this.initData();

  },
  onReachBottom() {
    // 加载更多
    this.loadMore();
  },
  methods: {
    initData() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        keyword: ''//搜索关键字
      }
      this.list = [];
      this.total = 0;
      this.getList();
    },
    // 搜索
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.queryParams.keyword = this.queryParams.keyword.trim();
      this.list = [];
      this.getList();
    },
    // 获取列表数据
    getList() {
      this.loadStatus = 'loading';
      setTimeout(() => {
        let params = Object.assign({}, this.queryParams)
        params[this.searchType] = this.queryParams.keyword
        getCollection(params).then(res => {
          //当前为第一页
          if (this.queryParams.pageNum === 1) {
            this.list = res.rows;
          } else {
            // 不是第一页,则追加数据
            this.list = this.list.concat(res.rows);
          }
          this.total = res.total;
          this.loadStatus = this.total <= this.queryParams.pageNum * this.queryParams.pageSize ? 'noMore' : 'more';
          // 如果没有数据
          if (this.total === 0) {
            this.loadStatus = 'noMore';
            this.contentText.contentnomore = "暂无数据";
          }
        }).catch(err => {
          console.log(err)
        })

      }, 500);

    },
    // 加载更多
    loadMore() {
      // 加载更多,如果总数大于当前页数*pageSize,则加载更多
      if (this.total > this.queryParams.pageNum * this.queryParams.pageSize) {
        this.loadStatus = 'loading';
        this.queryParams.pageNum++;
        this.getList();

      } else if (this.total <= this.queryParams.pageNum * this.queryParams.pageSize) {
        // 已经加载完毕
        console.log("已经加载完毕")
        this.loadStatus = 'noMore';
      }
    },
    // 详情
    handleDetail(item) {
      this.$tab.navigateTo('./detail?housePictureId=' + item.housePictureId)
    },
    // 编辑，显示选择框
    handleShowSelect() {
      this.showSelect = !this.showSelect;
      this.checkedIds = [];
    },
    // 删除
    handleDelete() {
      if (this.checkedIds.length === 0) {
        this.$modal.msg('请选择')
        return
      }
      this.$refs.commonDialog.confirm({
        title: '提示',
        content: '确认删除吗？',
        onConfirm: () => {
          let ids = this.checkedIds.join(',');
          deleteHistory(ids).then(res => {
            this.$modal.msg(res.msg || '删除成功')
            this.initData();
            this.$refs.commonDialog.hide();
          }).catch(err => {
            console.log(err)

          })
        }
      })
    },
    // 选择回调
    handleChecked(data) {
      console.log('data', data)
      let index = this.checkedIds.findIndex(item => item === data.userHistoryId)
      console.log('index', index)
      if (index !== -1) {
        this.checkedIds.splice(index, 1)
      } else {
        this.checkedIds.push(data.userHistoryId)
      }
      console.log('checkedIds', this.checkedIds)
    },
    // 全选
    handleSelectAll(e) {
      console.log('e', e)
      if (e) {
        // this.list.filter(item => !this.checkedIds.includes(item.userHistoryId)).forEach(item => {
        //   this.handleChecked(item)
        // })
        this.checkedIds = this.list.map(item => item.userHistoryId)
      } else {
        this.checkedIds = []
      }

    },
    //详情
    handleToDetail(item) {
      let data = item;
      uni.navigateTo({
        url: `/pages/main/room/roomDetail?data=${encodeURIComponent(JSON.stringify(data))}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .container__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    //height: 154rpx;
    display: flex;
    flex-direction: column;

    .container__header__search {

      .container__header__search-input {
        padding: 0 20rpx;

        .search-btn {
          background: $hxk-primary-color;
          color: #fff;
        }

        .cancel-btn {
          color: $hxk-primary-color;
          background: #fff;
          border: none;

          &:after {
            border: none;
          }
        }

        .container__header__search-input-type {
          margin-top: 10rpx;

          ::v-deep .checklist-group {
            display: flex;
          }

          ::v-deep .is--tag {

            &.is-checked {
              background: $hxk-primary-color !important;
              border-color: $hxk-primary-color !important;
            }
          }
        }
      }

      .container__header__search-tabs {
        ::v-deep .u-tabs__wrapper__nav__item__text {
          font-size: 28rpx !important;
        }

        ::v-deep .u-tabs__wrapper__nav__line {
          bottom: 18rpx !important;
          opacity: 0.6 !important;
        }
      }
    }


  }

  .container__body {
    padding: 20rpx;

    .container__body__list {
      margin-bottom: 150rpx;

      .container__body__list__item {
        background-color: #fff;
        border-radius: 10rpx;
        margin-bottom: 10rpx;
        height: 350rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .container__body__list__item__content {
          display: flex;
          align-items: center;
          padding: 20rpx;
          height: 100%;

          .container__body__list__item__content__left {
            //width: 25%;
            text-align: center;
            display: flex;
            align-items: center;
            height: 100%;

            &.active {
              color: $hxk-primary-color;
            }

            .container__body__list__item__content__left__section {
            }

            .container__body__list__item__content__left__image {
              width: 226rpx;
              height: 100%;
              background: #AAAAAA;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              overflow: hidden;
              display: flex;
              align-items: center;
              justify-content: center;

              image {
                width: 100%;
                height: 100%;
              }
            }
          }

          .container__body__list__item__content__right {
            padding: 0 10rpx;
            //width: 60%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .container__body__list__item__content__right__houseInfo {
              .title {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                word-break: break-all;
                font-weight: 800;
                font-size: 32rpx;
                color: #111111;
              }

              .tags {
                display: flex;
                padding: 10rpx 0;

                .h-tag {
                  min-width: 98rpx;
                  height: 40rpx;
                  line-height: 40rpx;
                  background: #F4F4F4;
                  border-radius: 6rpx 6rpx 6rpx 6rpx;

                  font-weight: 400;
                  font-size: 20rpx;
                  color: #757575;
                  text-align: center;
                  margin-right: 6rpx;
                }

                .h-tag-active {
                  min-width: 98rpx;
                  height: 40rpx;
                  line-height: 40rpx;
                  background: #FCEEE0;
                  border-radius: 6rpx 6rpx 6rpx 6rpx;

                  font-weight: 400;
                  font-size: 20rpx;
                  color: #A66237;
                  text-align: center;
                  margin-right: 6rpx;
                }
              }

              .area {
                display: flex;
              }

              .houseType {
                font-weight: 400;
                font-size: 24rpx;
                color: #757575;
              }

              .coupon {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(80rpx, 1fr));
                grid-gap: 10rpx;
                padding: 10rpx 0;

                .coupon-item {
                  border: 1rpx solid #D9001B;
                  border-radius: 10rpx;
                  color: #D9001B;
                  font-size: 20rpx;
                  text-align: center;
                  padding: 6rpx;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }

            .container__body__list__item__content__right__price {
              font-weight: bold;
              font-size: 20rpx;
              color: #FF3E27;

              .num {
                font-size: 36rpx;
                margin-right: 10rpx;
              }
            }
          }
        }

      }
    }
  }

  .container__footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: baseline;
    /* align-items: center; */
    width: 100%;
    padding: 20rpx;
    height: 140rpx;
    background: #fff;

    .container__footer__section {
      margin-right: 20rpx;
      width: 40%;
    }

    .container__footer__button {
      width: 100%;
      margin-right: 20rpx;

      &:last-child {
        margin-right: 0;
      }

      &.active {
        button {
          background-color: $hxk-primary-color;
          color: #fff;
        }
      }

      button {
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        //background-color: $hxk-primary-color;
        color: #000;
        font-size: 28rpx;
      }

    }
  }
}

</style>
